<template>
  <div class="popup">
    <el-dialog
      :ref="popObj.popName"
      :title="popObj.dialogTitle"
      :visible.sync="popObj.dialogVisible"
      :width="popObj.popupWidth"
      :before-close="popCancel"
    >
      <el-form
        :model="dataForm"
        ref="dataForm"
        label-width="70px"
        label-position="left"
        :rules="rules"
      >
        <el-row>
          <el-form-item label="选择项:" prop="value">
            <el-cascader
              v-model="dataForm.value"
              :options="options"
              @change="handleChangePoint"
              clearable
              style="width: 96%"
              ref="myCascader"
            >
              <template slot-scope="{ data }">
                <el-tooltip
                  popper-class="tooltip"
                  :disabled="data.label.length < 40"
                  class="item"
                  effect="dark"
                  :content="data.label"
                  placement="right"
                >
                  <span>{{ data.label }}</span>
                </el-tooltip>
              </template>
            </el-cascader>
          </el-form-item>
        </el-row>
        <el-row style="display: flex">
          <el-form-item
            label="上传:"
            prop="fileList"
            style="width: 50%"
            key="2"
          >
            <el-upload
              class="upload-demo"
              ref="upload"
              drag
              :headers="headers"
              :limit="1"
              :action="uploadImgUrl"
              :before-upload="beforeUpload"
              :auto-upload="true"
              :on-change="handleChange"
              :on-success="handlePreview"
              :on-exceed="uploadExceed"
              :file-list="dataForm.fileList"
              :on-remove="handleRemove"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                支持上传格式：png 、jpg 、jpeg一次最多上传1个文件
              </div>
            </el-upload>

            <!-- <imgUpload></imgUpload> -->
          </el-form-item>
          <el-col style="margin-left: 30px">
            <el-form-item label="描述:" prop="lawDetail" key="1">
              <el-input
                v-model="dataForm.lawDetail"
                type="textarea"
                :rows="5"
                placeholder="请输入执法依据"
                clearable
                style="width: 370px"
              ></el-input>
            </el-form-item>
            <el-form-item label="执法者:" prop="lawMan">
              <el-input
                v-model="dataForm.lawMan"
                placeholder="请输入执法者"
                clearable
                style="width: 370px"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="popCancel">取 消</el-button>
        <el-button type="primary" @click="popConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
          
<script>
import score from "../common/threePoint.json";
import sixPoint from "../common/sixPoint.json";
import ninePoint from "../common/ninePoint.json";
import tewlvePoint from "../common/twelvePoint.json";
import { addScore, updateScore } from "@/api/assessmentScoring";
import { getToken } from "@/utils/auth";
import imgUpload from "../../../components/ImageUpload";
import { dateTypeFormat, formatDate } from "../../../utils/index";

export default {
  name: "Index",
  components: { imgUpload },
  props: {
    popObj: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      activeName: "first",
      tableData: score.data,
      sixData: sixPoint.data,
      nineData: ninePoint.data,
      twelveData: tewlvePoint.data,
      dialogFormVisible: false,
      dataForm: {
        fileList: [],
        name: "",
        lawInfo: "",
        value: "",
        lawMan: "",
        lawDetail: "",
        file: "",
        parentId: 0,
        id: 0,
      },
      options: [
        {
          value: 3,
          label: "3分",
          children: score.data,
        },
        {
          value: 6,
          label: "6分",
          children: sixPoint.data,
        },
        {
          value: 9,
          label: "9分",
          children: ninePoint.data,
        },
        {
          value: 12,
          label: "12分",
          children: tewlvePoint.data,
        },
      ],
      rules: {
        fileList: [
          {
            required: true,
            message: "请上传执法图片",
            trigger: "change",
          },
        ],
        lawDetail: [{ required: true, message: "请输入描述", trigger: "blur" }],
        value: [{ required: true, message: "请输入选择项", trigger: "change" }],
        lawMan: [{ required: true, message: "请输入执法者", trigger: "blur" }],
      },
      mineScore: 0,
      mineScoreText: "",
      mineScoreIndex: 0,
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      imgSrc: "",
    };
  },
  mounted() {},
  methods: {
    popCancel() {
      // this.$emit("cancelPop");
      this.popObj.dialogVisible = false;
      this.rules.lawDetail[0].required = true;
      this.reset();
    },
    reset() {
      this.$refs.dataForm.clearValidate();
      this.dataForm = {
        fileList: [],
        name: "",
        lawInfo: "",
        value: "",
        lawMan: "",
        lawDetail: "",
        file: "",
        parentId: 0,
        id: 0,
        lawFile:''
      };
    },
    popConfirm() {
      this.$refs["dataForm"].validate((valid) => {
        // formData.append("mineScoreText", this.mineScoreText);
        // formData.append("mineScore", this.mineScore);
        // formData.append("lawMan", this.dataForm.lawMan);
        // formData.append("lawDetail", this.dataForm.lawDetail);
        // formData.append(
        //   "parentId",
        //   this.popObj.dialogTitle == "执法" ? this.dataForm.parentId : 0
        // );
        // formData.append(
        //   "lawTargetName",
        //   this.popObj.dialogTitle == "更新"
        //     ? this.popObj.row.lawTargetName
        //     : this.popObj.row.name
        // );
        // formData.append(
        //   "mineAddress",
        //   this.popObj.dialogTitle == "更新"
        //     ? this.popObj.row.mineAddress
        //     : this.popObj.row.mine
        // );
        // formData.append("file", this.dataForm.file);
        // formData.append("mineScoreIndex", this.mineScoreIndex);
        // formData.append("updateTime", formatDate(new Date()));
        // formData.append("id", this.dataForm.id);
        if (valid) {
          let data = {
            mineScoreText: this.mineScoreText,
            mineScore: this.mineScore,
            lawMan: this.dataForm.lawMan,
            lawDetail: this.dataForm.lawDetail,
            parentId:
              this.popObj.dialogTitle == "执法" ? this.dataForm.parentId : 0,
            lawTargetName:
              this.popObj.dialogTitle == "更新"
                ? this.popObj.row.lawTargetName
                : this.popObj.row.name,
            mineAddress:
              this.popObj.dialogTitle == "更新"
                ? this.popObj.row.mineAddress
                : this.popObj.row.mine,
            lawFile:  this.imgSrc,
            mineScoreIndex: this.mineScoreIndex,
            updateTime: formatDate(new Date()),
            id: this.dataForm.id,
          };
          if (this.popObj.dialogTitle == "执法") {
            addScore(data).then(() => {
              this.$modal.msgSuccess("执法成功");
              this.Refresh();
            });
          } else if (this.popObj.dialogTitle == "更新") {
            updateScore(data).then(() => {
              this.$modal.msgSuccess("更新成功");
              this.Refresh();
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    Refresh() {
      this.popObj.dialogVisible = false;
      this.rules.lawDetail[0].required = true;
      this.rules.fileList[0].required = true;
      this.$parent.getList();
      this.reset();
    },
    // 上传前校验
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 5) {
        this.$message.warning(
          "你上传的 “" + file.name + "” 文件过大，请上传小于5M的文件。"
        );
        return false;
      }

      if (
        file.name.indexOf("@") != -1 ||
        file.name.indexOf("#") != -1 ||
        file.name.indexOf('""') != -1 ||
        file.name.indexOf("<") != -1 ||
        file.name.indexOf(">") != -1 ||
        file.name.indexOf("?") != -1 ||
        file.name.indexOf("|") != -1 ||
        file.name.indexOf("/") != -1 ||
        file.name.indexOf(":") != -1 ||
        file.name.indexOf("``") != -1
      ) {
        this.$message.warning(
          "你上传的 “" +
            file.name +
            "” 文件有特殊字符，文件名中不可存在特殊字符,请重新上传"
        );
        return false;
      }

      let index = file.name.lastIndexOf(".");
      let Type = file.name.substr(index + 1, file.name.length);
      if (["png", "jpg", "jpeg"].indexOf(Type.toLowerCase()) === -1) {
        this.$message({
          type: "warning",
          message: "请上传后缀名为png 、jpg 、jpeg的附件！",
        });
        return false;
      }
    },
    handleChangePoint(value) {
      if (value) {
        this.mineScore = value[0]; // 分数
        this.mineScoreIndex = value[1]; // 第几项
        this.mineScoreText =
          this.$refs.myCascader.getCheckedNodes()[0].pathLabels[1]; // 选择项
      }
      console.log("9999999", this.mineScoreText);
    },
    // 消除文件校验
    handleChange(file, fileList) {
      if (fileList && fileList.length) {
        this.$refs.dataForm.clearValidate(["lawDetail"]);
        this.rules.lawDetail[0].required = false;
      }
    },
    handleRemove(file, fileList) {
      this.rules.lawDetail[0].required = true;
    },
    handlePreview(res, file, fileList) {
      console.log("---------", file);
      this.imgSrc = file.response.url;
      this.dataForm.file = file.raw;
      this.dataForm.fileList = fileList;
    },
    uploadExceed() {
      this.$message({
        type: "warning",
        message: "您已添加了一个文件，如需替换，请先删除已添加的文件！",
      });
    },
  },
  watch: {
    "dataForm.lawDetail": {
      handler(newVal, oldVal) {
        if (newVal && newVal.length) {
          this.$refs.dataForm.clearValidate(["fileList"]);
          this.rules.fileList[0].required = false;
          return;
        }
        this.rules.fileList[0].required = true;
      },
    },
    "dataForm.value": {
      handler(newVal, oldVal) {
        if (newVal && newVal.length) {
          this.mineScore = newVal[0]; // 分数
          this.mineScoreIndex = newVal[1]; // 第几项
          // this.mineScoreText = this.popObj.row.mineScoreText;
        }
        console.log("888888888", this.mineScoreText);
      },
    },
    "dataForm.fileList": {
      handler(newVal, oldVal) {
        if (newVal && newVal.length) {
          this.$refs.dataForm.clearValidate(["lawDetail"]);
          this.rules.lawDetail[0].required = false;
        }
      },
    },
  },
};
</script>
          
<style lang="scss">
.popup {
  width: 550px;
  .el-dialog {
    z-index: 10000;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(17, 130, 251, 0.5);
    border-radius: 5px;
    margin-top: 10% !important;
  }
  .el-dialog__header {
    width: 100%;
    height: 50px;
    line-height: 38px;
    border-bottom: 1px solid #f6f7f9;
    box-sizing: border-box;
    padding: 0 20px;
    font-size: 16px;
    position: relative;
    z-index: 10;
  }
  .el-dialog__close.el-icon.el-icon-close {
    font-size: 22px;
    width: 17px;
    height: 17px;
  }
  .el-button.el-button--default {
    width: 88px;
    color: #1182fb;
    border: 1px solid #1182fb;
  }
  .el-button.el-button--primary {
    width: 88px;
  }
  .el-dialog__body {
    padding: 24px 32px;
    box-sizing: border-box;
  }
  .el-dialog__headerbtn {
    top: 16px;
  }
  .el-dialog__title {
    color: #3c4354;
    font-family: PingFangSC-Regular;
    font-size: 18px;
    line-height: 50px;
  }
  .el-icon-folder-add {
    color: #1948f5;
    font-size: 18px;
    vertical-align: middle;
    margin-left: 10px;
    cursor: pointer;
  }
  .el-cascader {
    width: 90%;
  }
}
</style>
<style>
.el-cascader-node {
  max-width: 700px;
}

.tooltip.el-tooltip__popper {
  background-color: rgb(109, 192, 247) !important;
}

.tooltip.el-tooltip__popper[x-placement^="right"] .popper__arrow:after,
.tooltip.el-tooltip__popper[x-placement^="right"] .popper__arrow {
  border-right-color: rgb(109, 192, 247);
  opacity: 1;
}
.tooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after,
.tooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-color: rgb(109, 192, 247);
  opacity: 1;
}
.tooltip.el-tooltip__popper[x-placement^="left"] .popper__arrow:after,
.tooltip.el-tooltip__popper[x-placement^="left"] .popper__arrow {
  border-left-color: rgb(109, 192, 247);
  opacity: 1;
}
.tooltip.el-tooltip__popper[x-placement^="bottm"] .popper__arrow:after,
.tooltip.el-tooltip__popper[x-placement^="bottm"] .popper__arrow {
  border-bottom-color: rgb(109, 192, 247);
  opacity: 1;
}
</style>
          
          